<template>
    <div id="MovieList" style="width: 100%;height: 100vh;overflow-y: auto">
      <update-info class="updateBox updateInfo" :movieInfo="movieInfo"/>
      <el-container>
        <el-main style="height: 100%;padding: 0">
          <el-table
            :data="movieTable"
            stripe
            style="width: 100%;"
            :row-style="tableRowStyle">
            <el-table-column prop="movieImg" label="游戏海报" width="170px">
              <template slot-scope="scope">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img :src="scope.row.movieImg" alt="" style="width: 170px;height: 238px">
                  <img slot="reference" :src="scope.row.movieImg" style="width: 35px;height: 49px">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="movieId" label="电影ID" width="70px">
            </el-table-column>
            <el-table-column prop="movieName" label="电影名" width="200px">
            </el-table-column>
            <el-table-column prop="movieGen" label="标签" width="100px">
            </el-table-column>
            <el-table-column prop="movieFollower" label="关注人数">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button @click="updateMovie(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="deleteMovie_(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
</template>

<script>
    import api from "../../model/api";
    import updateInfo from "./updateInfo";
    import $ from "jquery";

    export default {
        name: "MovieList",
      data() {
        return {
          movieTable:[],
          movieInfo:{},
        }
      },
      components:{
        updateInfo
      },
      created() {
        this.getMoviesList()
      },
      methods:{
        getMoviesList(){
          api.getMovies().then(res => {
            this.movieTable = res.data
          })
        },
        tableRowStyle({ row, rowIndex }) {
          return 'background-color: #F7F6Fd;'
        },
        // 修改table header的背景色
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return 'background-color: lightblue;color: #303133;font-weight: 500;font-size: 20px;' //font-size: 20px;为字体大小设置
          }
        },
        async deleteMovie_(val){
          this.$confirm('是否删除该电影?', '谨慎操作', {confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(()=>{
            this.deleteMovie(val.movieId)
          }).catch(()=>{
          })
        },
        async deleteMovie(movieId){
            const {data:res} = await this.$axios.post('v1/deleteMovie',{movieId:movieId})
            if(res.code === 200){
              this.$message.success('删除成功')
              this.getMoviesList()
            }
        },
        updateMovie(val){
          this.movieInfo = val
          $('.updateInfo').css('display','block')
        }
      }
    }
</script>

<style lang="less" scoped>
  .updateInfo{
    display: none;
  }

</style>
